본문으로 건너뛰기

Tailwind CSS의 레이어 시스템

작성일 : 2025.02.16

개요​

Tailwind CSS는 레이어(layer) 시스템을 통해 스타일을 체계적으로 관리합니다. 각 레이어는 특정한 목적을 가지고 있으며, 우선순위에 따라 순차적으로 적용됩니다. 오늘은 @tailwind 지시어의 세 가지 주요 레이어에 대해 자세히 알아보겠습니다.

1. @tailwind base​

기본 HTML 요소의 스타일을 정의하는 레이어입니다.

주요 기본 스타일​

/* 기본적으로 정의되는 스타일 예시 */
h1 { font-size: 2em; margin: 0.67em 0; }
h2 { font-size: 1.5em; margin: 0.83em 0; }
body { margin: 0; font-family: system-ui; }

/* styles.css */
@tailwind base;

/* base 레이어에 사용자 정의 스타일 추가 */
@layer base {
  h1 {
    @apply text-2xl font-bold mb-4;
  }
  h2 {
    @apply text-xl font-semibold mb-3;
  }
  /* 기본 링크 스타일 */
  a {
    @apply text-blue-600 hover:text-blue-800;
  }
}

base 레이어의 주요 클래스들​

  • antialiased: 더 부드러운 폰트 렌더링
  • selection:bg-{color}: 텍스트 선택 시 배경색
  • font-sans, font-serif, font-mono: 기본 폰트 패밀리
  • dark:: 다크 모드 기본 설정

2. @tailwind components​

재사용 가능한 컴포넌트 스타일을 정의하는 레이어입니다.

컴포넌트 레이어의 주요 클래스들​

/* 자주 사용되는 컴포넌트 클래스 예시 */
.btn {
  @apply px-4 py-2 rounded;
}

.card {
  @apply p-6 rounded-lg shadow-lg;
}

.badge {
  @apply px-2 py-1 text-sm rounded-full;
}

.nav-link {
  @apply text-gray-700 hover:text-gray-900;
}

/* styles.css */
@tailwind components;

/* 사용자 정의 컴포넌트 클래스 */
@layer components {
  .btn {
    @apply px-4 py-2 rounded-lg font-semibold transition-colors;
  }
  .btn-primary {
    @apply btn bg-blue-500 text-white hover:bg-blue-600;
  }
  .btn-secondary {
    @apply btn bg-gray-500 text-white hover:bg-gray-600;
  }
  .card {
    @apply p-6 rounded-xl shadow-lg bg-white;
  }
}

3. @tailwind utilities​

가장 세부적인 스타일을 담당하는 유틸리티 레이어입니다.

유틸리티 레이어의 주요 클래스들​

레이아웃​

  • Flexbox: flex, flex-row, flex-col, justify-center, items-center
  • Grid: grid, grid-cols-{1-12}, gap-{size}
  • 컨테이너: container, mx-auto
  • 포지셔닝: relative, absolute, fixed, sticky

스페이싱​

  • 마진: m-{size}, mx-{size}, my-{size}, mt-{size}, mb-{size}
  • 패딩: p-{size}, px-{size}, py-{size}, pt-{size}, pb-{size}

사이징​

  • 너비: w-{size}, w-full, w-screen, max-w-{size}
  • 높이: h-{size}, h-full, h-screen, max-h-{size}

타이포그래피​

  • 폰트 크기: text-{size} (xs, sm, base, lg, xl, 2xl, ...)
  • 폰트 두께: font-{weight} (thin, light, normal, medium, bold, ...)
  • 텍스트 정렬: text-left, text-center, text-right
  • 텍스트 색상: text-{color}-{shade}

배경​

  • 배경색: bg-{color}-{shade}
  • 배경 크기: bg-cover, bg-contain
  • 배경 위치: bg-center, bg-left, bg-right

테두리​

  • 테두리: border, border-{size}
  • 테두리 색상: border-{color}-{shade}
  • 테두리 스타일: border-solid, border-dashed
  • 테두리 반경: rounded-{size}

효과​

  • 그림자: shadow-{size}
  • 투명도: opacity-{value}
  • 전환: transition, duration-{time}
  • 변환: scale-{value}, rotate-{degree}

상호작용​

  • 호버: hover:*
  • 포커스: focus:*
  • 활성: active:*
  • 비활성: disabled:*

반응형 디자인​

모든 유틸리티 클래스는 반응형 접두사와 함께 사용 가능:

  • sm: - 640px 이상
  • md: - 768px 이상
  • lg: - 1024px 이상
  • xl: - 1280px 이상
  • 2xl: - 1536px 이상
<!-- 반응형 예시 -->
<div class="w-full md:w-1/2 lg:w-1/3">
  <!-- 모바일에서는 전체 너비, 태블릿에서는 절반, 데스크톱에서는 1/3 너비 -->
</div>

레이어의 우선순위​

Tailwind CSS의 레이어는 다음과 같은 우선순위를 가집니다: base < components < utilities

이러한 구조 덕분에 utilities 레이어의 클래스들은 components나 base 레이어의 스타일을 언제든지 재정의할 수 있으며, 이는 유연한 스타일링을 가능하게 합니다.

이러한 레이어 시스템을 이해하고 활용하면, 더 체계적이고 유지보수하기 쉬운 CSS 코드를 작성할 수 있습니다. 특히 큰 규모의 프로젝트에서 스타일 충돌을 방지하고 일관된 디자인 시스템을 구축하는 데 매우 유용하다고 생각합니다.